<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:cc="http://java.sun.com/jsf/composite/components">

<!--@elvariable id="props" type="java.util.Map"-->
<!--@elvariable id="status" type="Object"-->
<ui:composition template="templates/restricted.xhtml">
    <ui:define name="title">JEE6 Home page. Registry Monitor</ui:define>
    <ui:define name="content">
        <ui:param name="props" value="#{registryMonitor.registry.properties}"/>
        <h:form id="registry" prependId="false">
            <table>
                <tr>
                    <td><h:inputText id="addNewKey" value="#{registryMonitor.newKey}" styleClass="property-input"/></td>
                    <td><h:inputText id="addNewValue" value="#{registryMonitor.newValue}" styleClass="property-input"/></td>
                    <td>
                        <h:commandButton value="Add" action="#{registryMonitor.addProperty}">
                            <f:ajax event="action" execute="@form" render="registry"/>
                        </h:commandButton>
                    </td>
                </tr>
                <tr id="row" jsfc="ui:repeat" value="#{props.keySet().toArray()}" var="key" varStatus="status" class="#{status.index%2==0?'rows-pair':'rows-odd'}">
                    <td><span id="label-#{status.index}" class="property-label">#{key}</span></td>
                    <td>
                        <h:inputText id="newValue" value="#{props[key]}" styleClass="property-input"
                                     onmouseover="this.style.backgroundColor='#ff9';
                                                 document.getElementById('label-#{status.index}').style.backgroundColor='#ff9'"
                                     onmouseout="this.style.backgroundColor='transparent';
                                                 document.getElementById('label-#{status.index}').style.backgroundColor='transparent'">
                        </h:inputText>
                    </td>
                    <td>
                        <h:commandButton value="Modify">
                            <f:ajax event="action" execute="@form" render="newValue"/>
                        </h:commandButton>
                        <h:commandButton value="Remove" action="#{registryMonitor.removeProperty}">
                            <f:param name="key" value="#{key}"/>
                            <f:ajax event="action" execute="@form" render="@form"/>
                        </h:commandButton>
                    </td>
                </tr>
            </table>
        </h:form>

    </ui:define>
</ui:composition>

</html>